<template>
    <a-layout-sider v-model:collapsed="value" collapsible
        :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }">
        <div class="logo" ref="logoRef" @click="() => $router.push('/')" />
        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
            <router-link custom to="/table" v-slot="{ href, route, navigate, isActive, isExactActive }">
                <a-menu-item key="1" @click="navigate">
                    <pie-chart-outlined />
                    <span>{{route.meta?.title}}</span>
                </a-menu-item>
            </router-link>
            <router-link custom to="/editable-table" v-slot="{ href, route, navigate, isActive, isExactActive }">
                <a-menu-item key="1-1" @click="navigate">
                    <pie-chart-outlined />
                    <span>{{route.meta?.title}}</span>
                </a-menu-item>
            </router-link>
            <router-link custom to="/pc" v-slot="{ href, route, navigate, isActive, isExactActive }">
                <a-menu-item key="2" @click="navigate">
                    <pie-chart-outlined />
                    <span>{{route.meta?.title}}</span>
                </a-menu-item>
            </router-link>
            <a-menu-item key="5">
                <desktop-outlined />
                <span>医嘱</span>
            </a-menu-item>
            <router-link custom to="/userApp" v-slot="{ href, route, navigate, isActive, isExactActive }">
                <a-menu-item key="3" @click="navigate">
                    <pie-chart-outlined />
                    <span>{{route.meta?.title}}</span>
                </a-menu-item>
            </router-link>
            <router-link custom to="/select-test" v-slot="{ href, route, navigate, isActive, isExactActive }">
                <a-menu-item key="10" @click="navigate">
                    <pie-chart-outlined />
                    <span>{{route.meta?.title}}</span>
                </a-menu-item>
            </router-link>
            <router-link custom to="/date-time-test" v-slot="{ href, route, navigate, isActive, isExactActive }">
                <a-menu-item key="11" @click="navigate">
                    <pie-chart-outlined />
                    <span>{{route.meta?.title}}</span>
                </a-menu-item>
            </router-link>
            <router-link custom to="/global-def" v-slot="{ href, route, navigate, isActive, isExactActive }">
                <a-menu-item key="2" @click="navigate">
                    <pie-chart-outlined />
                    <span>{{route.meta?.title}}</span>
                </a-menu-item>
            </router-link>
            <a-sub-menu key="sub2">
                <template #title>
                    <span>
                        <team-outlined />
                        <span>问题</span>
                    </span>
                </template>
                <a-menu-item key="6">需要注意的地方</a-menu-item>
                <a-menu-item key="8">怎么办？</a-menu-item>
            </a-sub-menu>
            <a-menu-item key="9">
                <file-outlined />
                <span>value:{{ value }}</span>
            </a-menu-item>
        </a-menu>
    </a-layout-sider>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { PieChartOutlined, DesktopOutlined, TeamOutlined, FileOutlined } from '@ant-design/icons-vue';
import type { leftMenuProps } from './left-menu-props';

const selectedKeys = ref<string[]>(['1'])

// 使用外部接口，菜单的收缩功能显然正常，但是不能正常访问prop.collapsed 的值
// interface Prop extends leftMenuProps { }
// const props = defineProps<Prop>()

// 如果把下面的注释打开，上面的注释掉， 再打印 value.value就正常了
interface Prop {
    collapsed: boolean
}
const props = defineProps<Prop>()

const collapsedEmit = defineEmits(['update:collapsed'])
const value = computed({
    get() {
        console.log('getter:' + props.collapsed)
        return props.collapsed
    },
    set(value) {
        console.log('setter:' + value)
        collapsedEmit('update:collapsed', value)
    }
})
setInterval(() => {
    // 这里一直会打印 undefined ,但是菜单的展开与收缩都正常
    console.log(`value.value: ${value.value}, prop.collapsed: ${props.collapsed}`)
}, 10000)

const logoRef = ref(null)
console.log('leftMenu ==> logoRef : ', logoRef)

const toSubApp = (path: string) => {
    window.location.href = 'http://localhost:5173'+path
}
</script>
<style scoped lang="scss">
.logo {
    background-image: url('@/assets/logo.png');
    height: 32px;
    margin: 16px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
</style>